<template>
  <a-spin :spinning="spanLoading" tip="请求中...">
    <div class="container">
      <div class="hd-scan-left">
        <a-card :bordered="false" style="height: 100%">
          <div class="hd-header" slot="title">
            司机：{{ bridgeship.NewSendcarIdname }} 运单号：{{
              bridgeship.NewName
            }}
          </div>
          <a-checkbox
            class="hd-header"
            slot="extra"
            :checked="allChecked"
            @change="allCheckedChange"
          >
            选择全部订单
          </a-checkbox>
          <div class="hd-card-content">
            <a-card :bordered="false" :loading="loading">
              <div class="hd-header" slot="title">
                未打印运单(共{{ allNumber }}张，选中{{ selectedNumber }}张)
              </div>
              <div
                class="hd-card-content-list"
                v-if="dataSource && dataSource.length > 0"
              >
                <a-list
                  item-layout="horizontal"
                  size="large"
                  :pagination="false"
                  :data-source="dataSource"
                >
                  <a-list-item
                    slot="renderItem"
                    :key="index"
                    slot-scope="item, index"
                    class="hd-list-item hd-body-title"
                  >
                    <template slot="actions">
                      <a-checkbox
                        :checked="item.checked"
                        @change="onChange(index)"
                      >
                      </a-checkbox>
                    </template>
                    <div
                      v-if="item.orderType == 0"
                      class="hd-list-item-content"
                    >
                      <a-row type="flex">
                        <a-col flex="1">发运单号:{{ item.NewName }} </a-col>
                        <a-col flex="1"
                          >物流公司： {{ item.NewSendcarCompany }}
                        </a-col>
                      </a-row>
                      <a-row class="center-text" type="flex">
                        <a-col flex="1" class="place">
                          {{ item.NewSendplace }}
                        </a-col>
                        <a-col class="tips"> 发往</a-col>
                        <a-col flex="1" class="place">
                          {{ item.NewDestination }}
                        </a-col>
                      </a-row>
                      <a-row type="flex">
                        <a-col flex="1">
                          重量：{{ item.NewTotalWeight?parseFloat(item.NewTotalWeight).toFixed(5):"" }}
                        </a-col>
                        <a-col flex="1">
                          数量：{{ item.NewBridgetotalQty?parseInt(item.NewBridgetotalQty):"" }}
                        </a-col>
                      </a-row>
                      <a-row type="flex">
                        <a-col flex="1"> 客户：{{ item.NewAccIdname }} </a-col>
                      </a-row>
                      <a-row type="flex">
                        <a-col flex="1">
                          打印状态：{{ getPrintStatus(item.NewPrintStatus) }}
                        </a-col>
                      </a-row>
                    </div>

                    <div
                      v-else-if="item.orderType == 1"
                      class="hd-list-item-content"
                    >
                      <a-row type="flex">
                        <a-col flex="1">附件名称:{{ item.new_name }} </a-col>
                        <!-- <a-col flex="1">附件类型 {{ item.new_type }} </a-col> -->
                      </a-row>
                    </div>
                  </a-list-item>
                </a-list>
              </div>
            </a-card>
            <div class="hd-notice">打印注意事项，如打印失败，请联系管理员</div>
          </div>
        </a-card>
      </div>
      <div class="hd-scan-right">
        <div class="hd-tips">
          单据类型
          <div class="hd-select-show">
            <a-select :default-value="1" @change="handleChange" size="large">
              <a-select-option
                v-for="(item, index) in typeList"
                :disabled="item.disabled"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </div>
        </div>
        <div class="hd-tips">
          选中打印/总共
          <div class="hd-input-show">{{ selectedNumber }}/{{ allNumber }}</div>
        </div>
        <div @click="goPrint()" class="hd-button">确认，下一步</div>
        <div @click="goBack()" class="hd-button cancel">取消打印</div>
      </div>
      <a-modal
        title="提示"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        ok-text="确认"
        cancel-text="取消"
      >
        <p>{{ modalTips }}</p>
      </a-modal>
    </div>
  </a-spin>
</template>

<script>
const ORDER_TYPE_TRANS = 0;
const ORDER_TYPE_ATTACHMENT = 1;

import { getOrderList } from "@/api/main";
export default {
  name: "ScanInfo",
  data() {
    return {
      visible: false,
      modalTips: "获取订单信息失败，请重试！",
      dataSource: [],
      spanLoading: false,
      orderList: [],
      bridgeship: {},
      attachment: [],
      orderId: "",
      loading: false,
      typeList: [
        {
          label: "整桥运输单",
          value: 1,
          disabled: false,
        },
        {
          label: "质量检验单",
          value: 2,
          disabled: true,
        },
        {
          label: "检验报告单",
          value: 3,
          disabled: true,
        },
      ],
    };
  },
  computed: {
    allNumber() {
      return this.dataSource.length;
    },
    selectedNumber() {
      return this.dataSource.filter((item) => item.checked).length;
    },
    allChecked() {
      return (
        this.dataSource.filter((item) => item.checked).length ==
        this.dataSource.length
      );
    },
  },
  mounted() {
    if (this.$route.params.orderId) {
      this.orderId = this.$route.params.orderId;
      this.getList();
    } else {
      this.goBack();
    }
  },
  methods: {
    getPrintStatus(newPrintStatus) {
      if (newPrintStatus == "1") {
        return "已打印";
      } else if (newPrintStatus == "2") {
        return "未打印";
      } else {
        return "打印状态未知";
      }
    },
    handleOk() {
      this.visible = false;
      this.$router.replace({ path: "/welcome" });
    },
    handleCancel() {
      this.handleOk();
    },
    getList() {
      this.spanLoading = true;
      getOrderList({ orderId: this.orderId })
        .then((response) => {
          this.spanLoading = false;
          const data = response.data;
          this.bridgeship = data.ResponseInfo.Bridgeship;
          this.attachment = data.uploadFiles;

          this.esbInfo = data.EsbInfo;
          if (this.esbInfo.returnStatus == "E") {
            this.modalTips = this.esbInfo.returnMsg;
            this.visible = true;
            return;
          } else if (this.esbInfo.returnStatus == "S") {
            if (!this.bridgeship) {
              throw new Error("bridgeship is null!");
            }
            localStorage.setItem("bridgeship", JSON.stringify(this.bridgeship));
            this.bridgeship["checked"] = true;
            this.bridgeship["orderType"] = ORDER_TYPE_TRANS;

            this.orderList = [];
            this.orderList.push(this.bridgeship);
            if (this.attachment) {
              this.attachment = this.attachment.map((o) => {
                let obj = {
                  checked: true,
                  orderType: ORDER_TYPE_ATTACHMENT,
                  ...o,
                  new_name: o.DocName,
                  new_type: o.DocType,
                  fujian: o.DocAddress,
                };
                this.orderList.push(obj);
                return obj;
              });
            }

            this.dataSource = JSON.parse(JSON.stringify(this.orderList));
          }
        })
        .catch((err) => {
          console.log(err);
          this.spanLoading = false;
          this.modalTips = "请求失败，请联系管理员！" + err.message;
          this.visible = true;
        });
    },
    goBack() {
      this.$router.replace({
        name: "Welcome",
      });
    },
    onChange(index) {
      this.orderList[index].checked = !this.orderList[index].checked;
      this.dataSource = JSON.parse(JSON.stringify(this.orderList));
    },
    allCheckedChange() {
      this.handSelectAll(!this.allChecked);
    },
    handSelectAll(checked) {
      this.orderList.forEach((item) => {
        item.checked = checked;
      });
      this.dataSource = JSON.parse(JSON.stringify(this.orderList));
    },
    handleSearch() {},
    handleChange() {},
    goPrint() {
      if (this.dataSource.filter((item) => item.checked).length == 0) {
        this.$message.error("必须选中一个才能打印");
        return;
      }
      localStorage.setItem(
        "printOrderList",
        JSON.stringify(this.orderList.filter((item) => item.checked))
      );
      this.$router.push({
        name: "PrintInfo",
        params: {
          orderId: this.orderId,
          shipOrderId: this.bridgeship.NewDridgedespatchId,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: row;
  height: 75vh;
  background-color: #fff;
  /deep/ .ant-checkbox-inner {
    width: 2rem;
    height: 2rem;
  }

  .hd-scan-left {
    flex: 3;
    background-color: forestgreen;
    border: 1px #fff solid;
    .hd-header {
      color: #40a9ff;
      font-weight: bold;
      font-size: 1.5rem;
    }
    .hd-body-title {
      color: #40a9ff;
      font-weight: bold;
      font-size: 1rem;
    }
    .hd-card-content {
      border: 0.25rem #40a9ff solid;
      height: 60vh;
      border-radius: 0.25rem;
      .hd-notice {
        margin-top: 2rem;
      }
      .ant-card-head-title {
        color: #40a9ff;
      }

      .hd-card-content-list {
        height: 47vh;
        overflow-y: scroll;
        .hd-list-item:first-child {
          margin-top: 0px;
        }
        .hd-list-item {
          margin-top: 20px;
          padding: 1rem 2rem;
          width: 100%;
          border: 0.25rem #40a9ff solid;
          border-radius: 0.5rem;
          .hd-list-item-content {
            display: inline-flex;
            flex-direction: column;
            width: 100%;
            .center-text {
              .place {
                text-align: center;
                font-size: 2rem;
              }
              .tips {
                align-self: center;
              }
            }
          }
          /deep/.ant-list-item-action {
            margin-left: 0;
          }
        }
      }
    }
  }
  .hd-scan-right {
    margin: 1rem 0;
    background-color: #fff;
    border-left: 0.125rem #40a9ff solid;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1rem 2rem;
    align-items: center;
    .hd-tips {
      font-size: 2rem;
      .hd-select-show {
        font-size: 2rem;
        margin-top: 1rem;
        font-size: 2rem;
      }
      .hd-input-show {
        padding: 0rem;
        border-radius: 0.25rem;
        border: 0.125rem #ccc solid;
        font-size: 2rem;
        text-align: center;
        margin-top: 1rem;
        input {
          font-size: 2rem;
        }
      }
    }

    .hd-button {
      background-color: #40a9ff;
      width: 16rem;
      text-align: center;
      border-radius: 0.5rem;
      border: 0.25rem #fff solid;
      color: white;
      font-size: 2rem;
    }
    .hd-button:hover {
      background-color: rgb(68, 17, 17);
    }
    .cancel {
      background-color: red;
    }
  }
}
</style>